<template>
    <div class="result">
      <div class="result-top">
        <div class="top">
          <img @click="back" class="back" src="../../components/search/icons/back.png" alt="">
          <input type="text" placeholder="">
          <img class="top-click" src="../../components/search/icons/cai.png" alt="">
        </div>
        <div class="header">
          <span v-for="(val, key) in result" :key="key">{{val}}</span>
        </div>
      </div>
      <div class="result-sole">
        <div class="phone" v-for="(val, key) in phone" :key="key">
          <img class="phone-left" :src="val.img" alt="">
          <div class="phone-right">
            <p>{{val.title}}</p>
            <p>
              <span>￥{{val.num}}</span>
              <span>{{val.nums}}</span>
            </p>
            <p>{{val.yet}}</p>
            <p>{{val.active}}</p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'result',
  data () {
    return {
      result: ['综合', '销量', '价格', '筛选'],
      phone: [
        {img: require('../../components/search/icons/phone.png'), title: '华为/荣耀V20胡歌同款8GB+128GB红色 移动联通电信4G全面屏手机', num: '3299.00', nums: '单买价￥3499.00', yet: '包邮', active: '2人拼·30天已拼261件'},
        {img: require('../../components/search/icons/phone.png'), title: '华为/荣耀V20胡歌同款8GB+128GB红色 移动联通电信4G全面屏手机', num: '3299.00', nums: '单买价￥3499.00', yet: '包邮', active: '2人拼·30天已拼261件'},
        {img: require('../../components/search/icons/phone.png'), title: '华为/荣耀V20胡歌同款8GB+128GB红色 移动联通电信4G全面屏手机', num: '3299.00', nums: '单买价￥3499.00', yet: '包邮', active: '2人拼·30天已拼261件'},
        {img: require('../../components/search/icons/phone.png'), title: '华为/荣耀V20胡歌同款8GB+128GB红色 移动联通电信4G全面屏手机', num: '3299.00', nums: '单买价￥3499.00', yet: '包邮', active: '2人拼·30天已拼261件'}
      ]
    }
  },
  methods: {
    back () {
      this.$router.push({path: '/search'})
    }
  }
}
</script>

<style scoped lang="scss">
.result{
  width: 100vw;
  height: 100vh;
  .result-top{
    height: 370px;
    background: #fff;
    border-bottom: solid 1px #dcdcdc;
    .top{
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding-top: 60px;
      box-sizing: border-box;
      .back{
        width: 60px;
        height: 60px;
      }
      input{
        width: 895px;
        height: 120px;
        border-radius: 60px;
        border: solid 1px #dcdcdc;
        background: url("../../components/search/icons/query.png") no-repeat 40px 40px, url("../../components/search/icons/del.png") no-repeat 800px 38px;
        background-size: 50px 50px;
      }
      .top-click{
        width: 65px;
        height: 65px;
      }
    }
    .header{
      width: 100vw;
      height: 165px;
      border: solid 1px;
      box-sizing: border-box;
      display: flex;
      margin-top: 15px;
      span{
        width: 25vw;
        text-align: center;
        line-height: 165px;
        font-size: 45px;
      }
    }
  }
  .result-sole{
    margin-top: 40px;
    overflow: hidden;
    background: #fff;
    .phone{
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 50px;
      .phone-left{
        width: 390px;
        height: 390px;
      }
      .phone-right{
        width: 690px;
        height: 390px;
        p:nth-child(1){
          font-size: 42px;
        }
        p:nth-child(2){
          margin-top: 48px;
          span:nth-child(1){
            color: #ec685b;
            font-size: 42px;
          }
          span:nth-child(2){
            font-size: 30px;
            text-decoration: line-through;
            color: #d3d3d3;
          }
        }
        p:nth-child(3){
          width: 105px;
          height: 55px;
          font-size: 30px;
          color: #fff;
          background: #ec675b;
          text-align: center;
          margin: 20px 0 20px 15px;
          border-radius: 20px;
        }
        p:nth-child(4){
          font-size: 25px;
        }
      }
    }
  }
}
</style>
